<template>
  <!--
   查：
     1：布局
     2：定义api
     3:导入api
     4:进入页面就调用api获取数据
     5：存储并渲染
     6：与分页建立关联
   增：
    1：创建新增弹框组件
    2：导入注册使用
    3：点击新增打开弹框
    4：布局
    5：表单验证
    6：定义新增接口api
    7:导入新增api
    8:点击确定在表单验证通过后调用api
    9:调用成功
        a:关闭弹框
        b:清空表单数据与验证
        c:提示
        d:刷新父级列表数据
   删
    1:点击删除弹出确定框
    2：定义删除api
    3:导入删除api
    4:确定框点击确定后调用api
    5:调用成功
      a:提示
      b:刷新列表
          如果有分页：
             1：如果当前页只有一条数据，且页码>1,删除后，页码-- 刷新数据
             2：页码=1 刷新数据？
   改：
     1：点击修改打开弹框
     2：回显数据（数据深拷贝赋值）
     3：在新增弹框组件中定义一个mode用于区分场景(mode='add/edit')
     4:新增与编辑打开弹框时都要修改mode为相应值
     5：调用标题
     6：表单验证调整
     7：定义修改api
     8:导入修改api
     9:确定点击事件中分场景调用api
     10:调用成功
        a:关闭弹框
        b:清空表单数据与验证
        c:提示
        d:刷新父级列表

   持久化：
     1：值修改了存储到浏览器
     2：初始值读取浏览器存储
 -->
  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button type="primary" size="small" @click="addEvent">新增角色</el-button>
          <el-table :data="list" class="table" border>
            <el-table-column label="序号" width="100px" align="center">
              <template v-slot="{$index}">
                {{ (page.page-1)*page.pagesize+$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" align="center" />
            <el-table-column label="描述" prop="description" align="center" />
            <el-table-column label="操作" align="center">
              <template v-slot="{row}">
                <el-button type="success" @click="setEvent(row)">分配权限</el-button>
                <el-button type="primary" @click="editEvent(row)">编辑</el-button>
                <el-button type="danger" @click="delEvent(row)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
          <div class="page">
            <!-- el-pagination
                layout:布局参数sizes,prev, pager, next,jumper,total
                total:总条数
                current-page.sync:页码
                page-size.sync:页容量
                page-sizes：页容量选项
                注意：要保证页容量选项中存在页容量的值
             -->
            <el-pagination
              layout="sizes,prev, pager, next,jumper,total"
              :total="total"
              :page-size.sync="page.pagesize"
              :current-page.sync="page.page"
              :page-sizes="[1,2,3,5,10,20,50,100,200]"
              @size-change="sizeChange"
              @current-change="getData"
            />
          </div>

        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <Info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 分配权限弹框组件 -->
    <SetPermission ref="set" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import Add from './components/Add.vue'
import jsCookie from 'js-cookie'
import SetPermission from './components/SetPermission.vue'
// import Info from './components/Info.vue'
export default {
  components: {
    Add,
    SetPermission,
    Info: () => import('./components/Info.vue') // 异步组件
  },
  data() {
    return {
      list: [{}],
      page: {
        page: 1,
        pagesize: +jsCookie.get('setting_size') || 1
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 新增点击
    addEvent() {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 删除事件
    async  delEvent(row) {
      await this.$confirm('您确定删除该项吗?', '提示')
      await sysRoleDelete(row.id)
      this.$message.success('删除成功')
      // 1：如果该页删除后没数据了，页码往前移动一页
      //   当前的list只有一条数据 && 页码>1
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      // 2：刷新前页码=1
      this.getData()
    },
    // 编辑点击
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      // 回显数据
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
    },
    // 页容量改变
    sizeChange() {
      jsCookie.set('setting_size', this.page.pagesize)
      // 刷新数据
      this.getData()
    },
    // 分配权限按钮点击
    setEvent(row) {
      // 打开弹框
      this.$refs.set.show = true
      // 调用获取角色详情方法
      this.$refs.set.getInfo(row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting{
  padding: 20px;
  .table{
    margin-top:20px
  }
  .page{
    text-align: center;
    padding-top:20px;
  }
}

</style>
